<template>
    <div>
        <div class="uiwu-header ls-card">
            <el-radio-group v-model="radio1" @change="changeArdio">
                <el-radio-button label="1" value="1">日报</el-radio-button>
                <el-radio-button label="2" value="2">周报</el-radio-button>
                <el-radio-button label="3" value="3">月报</el-radio-button>
                <el-radio-button label="4" value="4">年报</el-radio-button>
                <el-radio-button label="5" value="5">自定义</el-radio-button>
            </el-radio-group>
            <el-form inline style="margin-top: 16px">
                <el-form-item label="筛选时间:" v-if="radio1 == '5'">
                    <!-- <el-date-picker
					    v-model="dateTime"
					    type="date"
					    placeholder="选择日期"
						v-if="radio1 == '1'"
					/>
					<el-date-picker
					    v-model="dateTime"
					    type="week"
					    placeholder="选择周期"
						v-if="radio1 == '2'"
					/>
					<el-date-picker
					    v-model="dateTime"
					    type="month"
					    placeholder="选择月份"
						 v-if="radio1 == '3'"
					/>
					<el-date-picker
					    v-model="dateTime"
					    type="year"
					    placeholder="选择年份"
						 v-if="radio1 == '4'"
					/> -->
                    <el-date-picker
                        v-model="dateTime"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        v-if="radio1 == '5'"
                    />
                </el-form-item>
                <el-form-item label="分类">
                    <el-cascader
                        v-model="cate_id"
                        :options="options"
                        :props="{
                            children: 'child',
                            value: 'id',
                            label: 'name'
                        }"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchFun(cate_id)">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="ls-card m-t-16">
            <div class="card-title">商品整体概况</div>
            <div class="card-content m-t-24">
                <div class="title">商品数量</div>
                <el-row :gutter="24" style="flex: 1">
                    <el-col :span="8">
                        <el-tooltip content="在架商品数" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">在架商品数</div>
                                <div class="font-size-24">
                                    {{ goods.total_num }}
                                </div>
                                <!-- <div class="button">
                                    较前一日 <span>{{ goods.goods_type == 1 ? '+' : '-' }}{{ goods.goods_point }}</span>
                                </div> -->
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip content="被访问商品数" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">被访问商品数</div>
                                <div class="font-size-24">
                                    {{ goods.goods_num }}
                                </div>
                                <div class="button" v-if="radio1 != 5">
                                    较前一{{ getDanwei(radio1) }}
                                    <span>{{ goods.goods_type == 1 ? '+' : '-' }}{{ goods.goods_point }}</span>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip content="动销商品数" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">动销商品数</div>
                                <div class="font-size-24">
                                    {{ goods.order_num }}
                                </div>
                                <div class="button" v-if="radio1 != 5">
                                    较前一{{ getDanwei(radio1) }}
                                    <span>{{ goods.order_type == 1 ? '+' : '-' }}{{ goods.order_point }}</span>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </div>
            <div class="card-content m-t-24">
                <div class="title">商品流量</div>
                <el-row :gutter="24" style="flex: 1">
                    <!-- <el-col :span="8">
						<el-tooltip content="商品曝光数" placement="top">
							<div class="inline">
								<div class="lighter m-b-8">商品曝光数</div>
								<div class="font-size-24">
									50
								</div>
								<div class="button">
									较前一日 <span>0.00%</span>
								</div>
							</div>
						</el-tooltip>
					</el-col> -->
                    <el-col :span="8">
                        <el-tooltip content="商品浏览量" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">商品浏览量</div>
                                <div class="font-size-24">
                                    {{ goods.visit_num }}
                                </div>
                                <div class="button" v-if="radio1 != 5">
                                    较前一{{ getDanwei(radio1) }}
                                    <span>{{ goods.visit_type == 1 ? '+' : '-' }}{{ goods.visit_point }}</span>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip content="商品访客数" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">商品访客数</div>
                                <div class="font-size-24">
                                    {{ goods.customer_num }}
                                </div>
                                <div class="button" v-if="radio1 != 5">
                                    较前一{{ getDanwei(radio1) }}
                                    <span> {{ goods.customer_type == 1 ? '+' : '-' }}{{ goods.customer_point }}</span>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </div>
            <div class="card-content m-t-24">
                <div class="title">商品转化</div>
                <el-row :gutter="24" style="flex: 1">
                    <el-col :span="8">
                        <el-tooltip content="加购件数" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">加购件数</div>
                                <div class="font-size-24">
                                    {{ goods.cart_num }}
                                </div>
                                <div class="button" v-if="radio1 != 5">
                                    较前一{{ getDanwei(radio1) }}
                                    <span>{{ goods.cart_type == 1 ? '+' : '-' }}{{ goods.cart_point }}</span>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip content="下单件数" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">下单件数</div>
                                <div class="font-size-24">
                                    {{ goods.creat_num }}
                                </div>
                                <div class="button" v-if="radio1 != 5">
                                    较前一{{ getDanwei(radio1) }}
                                    <span>{{ goods.creat_type == 1 ? '+' : '-' }}{{ goods.creat_point }}</span>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                    <el-col :span="8">
                        <el-tooltip content="支付件数" placement="top">
                            <div class="inline">
                                <div class="lighter m-b-8">支付件数</div>
                                <div class="font-size-24">{{ goods.buy_num }}</div>
                                <div class="button" v-if="radio1 != 5">
                                    较前一{{ getDanwei(radio1) }} <span>{{ goods.buy_point }}</span>
                                </div>
                            </div>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="ls-card m-t-16">
            <div class="card-title">支付金额TOP</div>
            <div class="card-content m-t-24" style="border-bottom: 0">
                <el-table :data="goodslist">
                    <el-table-column label="排名" type="index" align="center" width="120"></el-table-column>
                    <el-table-column label="商品名称" prop="name" align="center"></el-table-column>
                    <el-table-column label="支付金额" prop="total_pay_price" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="ls-card m-t-16">
            <div class="card-title">访客TOP</div>
            <div class="card-content m-t-24" style="border-bottom: 0">
                <el-table :data="userlist">
                    <el-table-column label="排名" type="index" align="center" width="120"></el-table-column>
                    <el-table-column label="商品名称" prop="name" align="center"></el-table-column>
                    <el-table-column label="访客数" prop="total" align="center"></el-table-column>
                    <el-table-column label="访客数访问-支付转换率" prop="point" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { supplierStat, topGoods, topUser, categoryLists } from '@/api/home'
@Component
export default class FinanceProfile extends Vue {
    radio1 = '1'
    dateTime: any = null
    goods: any = {}
    goodslist: Array<object> = []
    userlist: Array<object> = []
    options: Array<object> = []
    cate_id: any = null
    postData: any = {
        cate_id: '',
        end_date: '',
        start_date: '',
        type: '1'
    }
    searchFun(cate_id: any) {
        if (cate_id) {
            this.postData.cate_id = cate_id[1]
        }
        if (this.dateTime && this.radio1 == '5') {
            this.postData.start_date = this.dateTime[0]
            this.postData.end_date = this.dateTime[1]
        } else {
            this.postData.start_date = ''
            this.postData.end_date = ''
        }
        this.postData.type = this.radio1
        this.getsupplierStat()
        this.gettopGoods()
        this.gettopUser()
    }
    changeArdio() {
        if (this.cate_id) {
            this.postData.cate_id = this.cate_id[1]
        }
        if (this.dateTime && this.radio1 == '5') {
            this.postData.start_date = this.dateTime[0]
            this.postData.end_date = this.dateTime[1]
        } else {
            this.postData.start_date = ''
            this.postData.end_date = ''
        }
        this.postData.type = this.radio1
        this.getsupplierStat()
        this.gettopGoods()
        this.gettopUser()
    }
    created() {
        this.getsupplierStat()
        this.gettopGoods()
        this.gettopUser()
        categoryLists().then(res => {
            console.log(res)
            this.options = res
        })
    }
    getDanwei(e: string) {
        let s = null
        switch (e) {
            case '1':
                s = '日'
                break
            case '2':
                s = '周'
                break
            case '3':
                s = '月'
                break
            case '4':
                s = '年'
                break
            default:
                s = '自定义'
                break
        }
        return s
    }
    getsupplierStat() {
        supplierStat(this.postData).then(res => {
            this.goods = res
        })
    }
    gettopGoods() {
        topGoods(this.postData).then(res => {
            this.goodslist = res.lists
        })
    }
    gettopUser() {
        topUser(this.postData).then(res => {
            this.userlist = res.lists
        })
    }
}
</script>

<style lang="scss" scoped>
.uiwu-header {
    background-color: #fff;
    padding: 16px;
}

.card-title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;

    &::before {
        content: '';
        width: 4px;
        height: 18px;
        background: #409eff;
        margin-right: 10px;
    }
}

.card-content {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 24px;

    .title {
        font-size: 18px;
        width: 400px;
        text-align: center;
        padding-right: 100px;
    }

    .lighter {
        font-size: 16px;
        color: #111;
    }

    .button {
        color: #999;

        span {
            color: #000;
        }
    }
}
</style>
